<template>
  <a-modal v-model:open="open" :title="fromModel.userId?'编辑':'新增'"
  cancel-text="取消"
           :confirm-loading="confirmLoading" @ok="handleOk" @cancel="close">
   <div>
     <a-form
         ref="formRef"
         :model="fromModel"
         :rules="rules"
        :label-col="{ span: 5 }"
     >


       <a-form-item label="用户名" name="userName">
         <a-input v-model:value="fromModel.userName" :disabled="fromModel.userId" placeholder="请输入用户名" allow-clear/>
       </a-form-item>
       <a-form-item label="密码" name="password" >
         <a-input v-model:value="fromModel.password" placeholder="请输入密码" allow-clear/>
       </a-form-item>
       <a-form-item label="手机号" name="phone">
         <a-input v-model:value="fromModel.phone" placeholder="请输入手机号" allow-clear/>
       </a-form-item>
       <a-form-item label="最大存储空间" name="roleIdList">

         <a-input v-model:value="fromModel.storageSize"
                  placeholder="请输入最大存储空间(单位字节)"
                  maxlength="11" allow-clear
         >
           <template #addonAfter>
             bit
           </template>
         </a-input>
       </a-form-item>
       <a-form-item label="账号状态" name="lockFlag">

         <a-radio-group v-model:value="fromModel.lockFlag" :options="typeOption" />
       </a-form-item>
       <a-form-item label="角色" name="roleIdList">

         <a-checkbox-group v-model:value="fromModel.roleIdList" :options="roleOption" />
       </a-form-item>
     </a-form>
   </div>
  </a-modal>
</template>
<script setup lang="ts">
import {ref, defineProps, defineEmits, watch, defineComponent, onMounted} from 'vue'
import {Role, UserInfo} from "@/types/global.ts";
import myIcon from '@/components/my-icon/index.vue'
import {saveUser,editUser} from "@/api/sys-setting/user.ts";
import {queryRoleList} from '@/api/sys-setting/role.ts'
import {useSystemStore} from '@/stroe'
import { useRouter} from "vue-router";
defineComponent({
  myIcon
})
  const props = defineProps(['user','modelValue']);
const systemStore =useSystemStore();

const roleOption = ref<any>([]);

const router = useRouter();
  const emits = defineEmits(['update:modelValue','success']);
  const generateUser = ():UserInfo=>{
    return{
      userId:0,
      userName:'',
      password:'',
      type:0,
      lockFlag:0,
      phone:'',
      roleIdList:[],
      storageSize:0
    }
  }
  const typeOption = [
    { label: '正常', value: '0' },
    { label: '锁定', value: '1' },

  ]
  const fromModel = ref(generateUser());
  const open = ref(false)
  const confirmLoading = ref(false);
  const formRef = ref();

const rules = {
  userName:[
    { required: true, message: '用户名不能为空'}
  ],

  lockFlag:[
    { required: true, message: '请选择账号状态'}
  ],
  phone:[
    { required: true, message: '手机号不能为空'}
  ],

}
const close = ()=>{
  fromModel.value = generateUser();
  confirmLoading.value = false;
  emits('update:modelValue',false)
}
  const handleOk = ()=>{
    formRef.value
        .validate()
        .then(async () => {
          confirmLoading.value = true;
          if (fromModel.value.userId){
           await editUser(fromModel.value);

          }else {
            await saveUser(fromModel.value)
          }

          confirmLoading.value = false;
          emits('success')
          systemStore.refreshMenu(router);
        })
        .catch(error => {
          confirmLoading.value = false;
          console.log('error', error);
        })
  }

  const getRoleList = ()=>{
    queryRoleList({
      pageNo:1,
      pageSize:999
    }).then((res:any)=>{
      res.result.records.forEach((item:Role)=>{
        roleOption.value.push(
            { label:item.roleName, value: item.roleId }
        )
      })
    })

  }

  watch(()=>props.user,(value)=>{

    fromModel.value = value;
    fromModel.value.password = null
  },{immediate:true,deep:true})
  watch(()=>props.modelValue,(value)=>{
  open.value = value;
},{immediate:true})
onMounted(()=>{
  getRoleList();
})
</script>
<style scoped lang="scss">
.icon-group{
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  max-height: 300px;
  overflow: auto;
  .icon-item{
    margin: 5px;
    border:1px solid #949090;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    border-radius: 5px;
    &.active{
      border:2px solid #0cacd3;
    }
  }
}
</style>
